<template>
	<view class="goods-content">
		<ycy-top-bar>{{ title }}</ycy-top-bar>
		<u-toast ref="uToast"></u-toast>
		<view class="form-content" v-if="JSON.stringify(currentItem) != '{}'">
			<u--form :borderBottom="false" :model="currentItem" labelWidth="80" ref="uForm">
				<u-form-item label="商品分类" prop="typeName">
					<view>{{ currentItem.typeName }}</view>
				</u-form-item>
				<u-form-item label="商品名称" prop="name">
					<view>{{ currentItem.name }}</view>
				</u-form-item>
				<u-form-item label="商品价格" prop="price">
					<view style="color: red">￥{{ currentItem.price }}</view>
				</u-form-item>
				<u-form-item label="商品尺码" prop="size">
					<view class="tag-box">
						<view class="tag-item" v-for="(item, index) in sizeList" :key="index">
							<u-tag :text="item" type="error" :name="index"></u-tag>
						</view>
					</view>
				</u-form-item>
				<!-- 尺码卡片 -->
				<view class="size-card" v-for="(params, index) in currentItem.paramsList" :key="index">
					<view class="size-card-title">尺码{{ params.size }}</view>
					<view class="color-table">
						<view class="color-table-item" v-for="(colorItem, i) in params.colorCountList" :key="i">
							<view class="color-table-item-box">
								<view class="color-table-item-box-title">颜色</view>
								<view class="color-table-item-box-content">
									<u-tag :text="colorItem.color" type="error"></u-tag>
								</view>
							</view>
							<view class="color-table-item-box">
								<view class="color-table-item-box-title">库存</view>
								<view class="color-table-item-box-content" style="font-weight: bold;">{{ colorItem.storeCount }}</view>
							</view>
							<view class="color-table-item-box" v-if="isOutbound">
								<view class="color-table-item-box-title">出库</view>
								<view class="color-table-item-box-content" >
									<u-number-box v-model="colorItem.count" buttonSize="25" integer :min="0" :max="colorItem.storeCount" @overlimit="onOverLimit"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u--form>
		</view>
		<view class="save-btn" v-if="title != '查看商品信息'">
			<u-button text="出 库" icon="checkmark" color="#9dae8a" iconColor="#fff" @click="onShowConfirmOrder"></u-button>
		</view>
		<!-- 出库确认上拉框 -->
		<ycy-popup ref="popupRef" title="出库商品确认" rightbtnColor="#9dae8a" @onCanacel="onCanacel" @onConfirm="onConfirm">
			<view class="order-centent">
				<view class="goods-params">商品名称：<text >{{currentItem.name}}</text></view>
				<view class="goods-params">商品分类：<text >{{currentItem.typeName}}</text></view>
				<view class="goods-params">商品价格：<text style="color: red;">￥{{currentItem.price}}</text></view>
				<view class="order-table-content">
					<view class="order-table-title">
						<view class="order-table-title-item" style="width: 120rpx">尺码</view>
						<view class="order-table-title-item" style="width: 120rpx">颜色</view>
						<view class="order-table-title-item" style="width: 120rpx">数量</view>
					</view>
					<view class="order-table-main">
						<view v-for="(item, index) in orderList" :key="index" class="order-table-main-item">
							<view class="order-table-main-item-cell" style="width: 120rpx">{{item.size}}</view>
							<view class="order-table-main-item-cell" style="width: 120rpx">{{item.color}}</view>
							<view class="order-table-main-item-cell" style="width: 120rpx">{{item.count}}</view>
						</view>
					</view>
				</view>
			</view>
		</ycy-popup>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			if(options.type == 'check') this.initCheckPage(options);
			if(options.type == 'outbound') this.initOutPage(options);
		},
		data() {
			return {
				isShowConfirmOrder: false,
				isOutbound: false,
				title: '',
				currentItem: {},
				sizeList: [],
				orderList: []
			};
		},
		methods: {
			async initCheckPage(options) {
				this.title = '查看商品信息'
				this.isOutbound = false;
				await this.getGoodsDetail(options.goodsId, false);
				this.getCheckSizeList();
			},
			async initOutPage(options) {
				this.title = '商品出库'
				this.isOutbound = true;
				await this.getGoodsDetail(options.goodsId, true);
				this.getCheckSizeList();
			},
			getCheckSizeList() {
				this.sizeList = this.currentItem.paramsList.map(item => item.size );
			},
			onShowConfirmOrder() {
				this.currentItem.paramsList.forEach(item => {
					for (let colorCountItem of item.colorCountList) {
						if(colorCountItem.count == 0) continue;
						this.orderList.push({
							size: item.size,
							color: colorCountItem.color,
							count: colorCountItem.count,
							countId: colorCountItem.countId
						})
					}
				})
				if(this.orderList.length == 0) this.$toast.error(this,'暂未选择出库商品');
				else this.$refs.popupRef.open();
			},
			onOverLimit(type) {
				if( type == 'plus') this.$toast.error(this,'已超过库存容量');
			},
			onCanacel() {
				this.orderList = [];
			},
			async onConfirm() {
				this.$toast.loading(this);
				const res = await this.$api.goodsManage.outbound(this.orderList);
				if(res.code == 200) {
					this.$toast.closeLoading(this);
					const recordData = {
						userId: this.$cache.GET_USERINFO().id,
						typeName: this.currentItem.typeName,
						name: this.currentItem.name,
						price: this.currentItem.price,
						orderListJsonStr: JSON.stringify(this.orderList)
					}
					const recordRes = await this.$api.goodsOutboundRecord.save(recordData);
					if(recordRes.code == 200 && recordRes.data) {
						this.$toast.success(this,'出库成功',null,() => {
							uni.redirectTo({ url: '/pages/admin/manage/pages/goodsOutbound/index' });
							this.orderList = [];
						});
					}
				}else this.$toast.error(this,res.message);
			},
			async getGoodsDetail(goodsId, isOutbound) {
				const res = await this.$api.goodsManage.findOneDetail(goodsId, isOutbound);
				if(res.code == 200) this.currentItem = res.data;
				else this.$toast.error(this,res.message);
			},
		}
	}
</script>

<style lang="scss">
	.goods-content {
		// position: relative;
	}
	.order-centent {
		.goods-params {
			padding: $spacing-small;
		}
		.order-table-content {
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			.order-table-title {
				display: flex;
				justify-content: space-around;
				// border-bottom: 1px solid black;
				.order-table-title-item {
					color: $green-bg-color;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					padding: $spacing-small;
				}
			}
			.order-table-main {
				.order-table-main-item {
					display: flex;
					justify-content: space-around;
					.order-table-main-item-cell {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: $spacing-small;
					}
				}
			}
		}
	}
	
	
	.tag-box {
		display: flex;
		flex-wrap: wrap;
		.tag-item {
			margin-right: $spacing-small;
			margin-bottom: $spacing-small;
		}
	}
	
	.save-btn {
		position: absolute;
		bottom: $spacing-large;
		left: 50%;
		transform: translateX(-50%);
	    width: 90%; 
	}
	
	.form-content {
		padding: 0 $spacing-base;
	}
	
	.size-card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #9dae8a;
		margin: $spacing-large 0;
		padding: $spacing-base;
		border-radius: 24rpx;
		.size-card-title {
			font-weight: bold;
			letter-spacing: 4rpx;
			// border: 2px solid gold;
		}
		.add-btn {
			position: absolute;
			right: $spacing-large;
			top: $spacing-small;
		}
		.color-table {
			width: 100%;
			// border: 2px solid salmon;
			.color-table-item {
				display: flex;
				justify-content: space-between;
				// border: 2px solid rebeccapurple;
				padding-top: $spacing-small;
				.color-table-item-box {
					display: flex;
					// border: 2px solid red;
					.color-table-item-box-title {
						font-size: $uni-font-size-paragraph;
						display: flex;
						align-items: center;
						padding-right: $spacing-small;
						// border: 2px solid goldenrod;
					}
					.color-table-item-box-content {
						display: flex;
						align-items: center;
						// border: 1px solid royalblue;
						.delete-btn {
							    height: 28px;
							    font-size: $uni-font-size-base;
							    display: flex;
							    align-items: center;
							    background-color: #dd524d;
								color: white;
						}
					}
				}
				
			}
		}
	}
	
</style>
